import { Component, Emit, Prop, Watch } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import type { FormItemDto } from '../types'
import { Input, Select,Tooltip,Tag } from 'ant-design-vue'
import { map } from 'lodash'

@Component
export class CustomInsurancePlanName extends Render {
    @Prop() formData?: FormItemDto
    @Prop() modelValue?: string
    tagList = [] as string[]
    selectValue = '' as string|number
    tagValue = ''
    @Emit('update:modelValue')
    emitUpdate() {
        return this.tagList
    }
    @Watch('modelValue', { immediate: true })
    handleWatchShow(newval: string[]) {
        this.tagList = newval ? [...newval] : []
    }
    // 删除
    onCloseTag(event:string) { 
        this.tagList = this.tagList.filter(item => item !== event)
        this.emitUpdate()
    }
    // 添加标签
    onAddTag(event:string) { 
        this.tagList.push(event)
        this.emitUpdate()
    }
    render() { 
        return <div>
            <div class="flex items-center">
                <Select placeholder="请选择" style="width: 102px" class="flex-none" v-model:value={ this.selectValue } options={ this.formData?.params.options } 
                    onChange={() => { 
                        if (Number(this.selectValue) > 0) { 
                            this.onAddTag(this.formData?.params.options.filter((item: { value:string,label:string })=>item.value === this.selectValue)[0].label)
                        }
                    } }
                />
                {
                    this.selectValue === 0 && <div class="ml-24 flex-1" >
                        <Input v-model:value={ this.tagValue } placeholder="请输入自定义的名称规则" allowClear  
                            v-slots={{
                                addonAfter: () => {
                                    return <div class="cursor-pointer text-blue-100 text-base" onClick={() => { 
                                        this.onAddTag(this.tagValue)
                                        this.tagValue = ''
                                    } }>确定</div>
                                },
                            }}
                        />
                    </div>
                }
            </div>
            <div class="flex items-center mt-8">
                <Tooltip>
                    {
                        this.tagList.map(item => { 
                            return (
                                <Tag closable class="my-4" onClose={() => { 
                                    this.onCloseTag(item)
                                } }>
                                    { item }
                                </Tag>
                            )
                        })
                    }
                </Tooltip>
            </div>
            <div class="text-black-300 text-sm">
                { this.formData?.params.tips }
            </div>
        </div>
    }
}

export default toNative<{formData?:FormItemDto}, {}>(CustomInsurancePlanName)